<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--秒杀页面</title>
	<link rel="icon" href="/assets/img/favicon.ico">


	<link rel="stylesheet" type="text/css" href="css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="css/widget-jquery.autocomplete.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-seckill-index.css" />
</head>
<style>

	ul {display:inline-block;}
</style>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"></div>
<script type="text/javascript">$("#nav-bottom").load("top.html");</script>


<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#service").hover(function(){
			$(".service").show();
		},function(){
			$(".service").hide();
		});
		$("#shopcar").hover(function(){
			$("#shopcarlist").show();
		},function(){
			$("#shopcarlist").hide();
		});

	})
</script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/jquery.autocomplete.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript" src="js/pages/seckill-index.js"></script>
<script>
	$(function(){
		$("#code").hover(function(){
			$(".erweima").show();
		},function(){
			$(".erweima").hide();
		});
	})
</script>
</body>

<div class="py-container index" id="secondApp">
	<!--banner-->
	<div class="banner">
		<img src="img/_/banner.png" class="img-responsive" alt="">
	</div>

	<!--商品列表-->
	<div class="goods-list">
		<ul class="seckill" id="seckill" v-for="(sku, index) in skuDto" :key="index">

			<li class="seckill-item" >
				<div class="pic" @click="skipSec(sku.id)">
					<img :src="sku.images" alt=''  >
				</div>
				<div class="intro"><span>{{sku.title}}</span></div>
				<div class='price'><b class='sec-price'>￥{{ly.formatPrice(sku.discount)}}</b><b class='ever-price'>￥{{ly.formatPrice(sku.price)}}</b></div>
				<div class='num'>
					<div>剩余{{surplusValue(sku.stock,sku.destock)}}</div>
					<div class='progress'>
						<div class='sui-progress progress-danger'><span :style="{width:surplusValue(sku.stock,sku.destock)}" class='bar'></span></div>
					</div><br>
					<div>剩余<b class='owned'>{{sku.stock}}</b>件</div>
				</div>
				<a class='sui-btn btn-block btn-buy' :href="'/seckills/'+sku.id+'.html'" target='_blank'>立即抢购</a>
			</li>

		</ul>
	</div>
	<div class="cd-top">
		<div class="top">
			<img src="img/_/gotop.png" />
			<b>TOP</b>
		</div>
		<div class="code" id="code">
			<span><img src="img/_/code.png"/></span>
		</div>
		<div class="erweima">
			<img src="img/_/erweima.jpg" alt="">
			<s></s>
		</div>
	</div>
</div>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/vue/vuetify.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: "#secondApp",
		/*vue数据*/
		data: {
			ly,
			skuDto:[]
		},
		/*属性监听*/
		watch: {

		},
		/*钩子函数*/
		created(){
			this.loadSearchPage();
		},
		/*方法*/
		methods:{
			//执行获取列表
			loadSearchPage(){
				ly.http.get('/second/secondList').then(resp=>{
					this.skuDto = resp.data;
				}).catch(e=>{
					console.log("秒杀页面加载数据失败");
				});
			},
			// 计算剩余比例
			surplusValue(num,desNum){
				return (num/desNum*100).toFixed(0) + "%";
			},
            // 跳转到详情页
            skipSec(id) {
			    location.href="/seckills/" + id + ".html";
            }
		},
		/*属性计算*/
		computed: {

		},
		/*组件*/
		components:{
			lyTop: () => import("./js/pages/top.js")
		}
	})
</script>
</html>